<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Portal 演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f8fafc;
        }
        
        .container {
            background: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #2d3748;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4a5568;
        }
        
        input[type="text"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .btn {
            background: #2d3748;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .btn:hover {
            background: #1a202c;
        }
        
        .btn:disabled {
            background: #a0aec0;
            cursor: not-allowed;
        }
        
        .result {
            margin-top: 20px;
            padding: 16px;
            border-radius: 8px;
            display: none;
        }
        
        .result.success {
            background: #c6f6d5;
            color: #22543d;
            border: 1px solid #9ae6b4;
        }
        
        .result.error {
            background: #fed7d7;
            color: #742a2a;
            border: 1px solid #feb2b2;
        }
        
        .portal-url {
            word-break: break-all;
            background: #f7fafc;
            padding: 12px;
            border-radius: 6px;
            margin-top: 10px;
            border: 1px solid #e2e8f0;
        }
        
        .info {
            background: #bee3f8;
            color: #2a4365;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #90cdf4;
        }
        
        .features {
            margin-top: 20px;
        }
        
        .features h3 {
            color: #2d3748;
            margin-bottom: 10px;
        }
        
        .features ul {
            list-style: none;
            padding: 0;
        }
        
        .features li {
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .features li:before {
            content: "✅ ";
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 Customer Portal URL 获取演示</h1>
        
        <div class="info">
            <strong>Customer Portal 是什么？</strong><br>
            Customer Portal 是 Stripe 提供的官方订阅管理页面，用户可以在其中查看订阅状态、管理支付方式、查看账单历史等。
        </div>
        
        <form id="portalForm">
            <div class="form-group">
                <label for="customerId">客户ID (Customer ID)</label>
                <input type="text" id="customerId" name="customerId" 
                       placeholder="例如: cus_1234567890" 
                       value="cus_test_customer" required>
                <small style="color: #666;">请输入要访问 Customer Portal 的客户ID</small>
            </div>
            
            <div class="form-group">
                <label for="returnUrl">返回URL (Return URL)</label>
                <input type="text" id="returnUrl" name="returnUrl" 
                       placeholder="例如: http://localhost:8002/portal-return" 
                       value="http://localhost:8002/portal-return" required>
                <small style="color: #666;">用户从 Customer Portal 返回后跳转的URL</small>
            </div>
            
            <button type="submit" class="btn" id="submitBtn">获取 Customer Portal URL</button>
        </form>
        
        <div id="result" class="result"></div>
        
        <div class="features">
            <h3>Customer Portal 功能包括：</h3>
            <ul>
                <li>查看当前订阅状态和详情</li>
                <li>管理支付方式（添加、删除、设置默认）</li>
                <li>查看账单历史和发票</li>
                <li>下载发票PDF</li>
                <li>取消或恢复订阅</li>
                <li>更新账单信息</li>
                <li>查看订阅计划详情</li>
                <li>管理多个订阅</li>
            </ul>
        </div>
    </div>

    <script>
        const API_BASE_URL = "http://localhost:8002";
        
        document.getElementById('portalForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = document.getElementById('submitBtn');
            const resultDiv = document.getElementById('result');
            
            // 获取表单数据
            const customerId = document.getElementById('customerId').value.trim();
            const returnUrl = document.getElementById('returnUrl').value.trim();
            
            if (!customerId) {
                showResult('error', '请输入客户ID');
                return;
            }
            
            // 禁用按钮
            submitBtn.disabled = true;
            submitBtn.textContent = '获取中...';
            
            try {
                const response = await fetch(`${API_BASE_URL}/create-portal-session`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        customer_id: customerId,
                        return_url: returnUrl
                    })
                });
                
                const result = await response.json();
                
                if (response.ok) {
                    const portalUrl = result.url;
                    showResult('success', `
                        <strong>✅ Customer Portal URL 获取成功！</strong><br><br>
                        <strong>会话信息：</strong><br>
                        会话ID: ${result.session_id}<br>
                        客户ID: ${result.customer_id}<br>
                        过期时间: ${new Date(result.expires_at * 1000).toLocaleString()}<br><br>
                        <strong>Portal URL：</strong><br>
                        <div class="portal-url">${portalUrl}</div><br>
                        <button class="btn" onclick="window.open('${portalUrl}', '_blank')">在新窗口打开 Customer Portal</button>
                    `);
                } else {
                    showResult('error', `❌ 获取失败: ${result.detail || '未知错误'}`);
                }
                
            } catch (error) {
                console.error('请求失败:', error);
                showResult('error', `❌ 请求失败: ${error.message}`);
            } finally {
                // 恢复按钮
                submitBtn.disabled = false;
                submitBtn.textContent = '获取 Customer Portal URL';
            }
        });
        
        function showResult(type, message) {
            const resultDiv = document.getElementById('result');
            resultDiv.className = `result ${type}`;
            resultDiv.innerHTML = message;
            resultDiv.style.display = 'block';
            
            // 滚动到结果区域
            resultDiv.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 页面加载时的提示
        window.addEventListener('load', function() {
            console.log('Customer Portal 演示页面已加载');
            console.log('请确保后端服务正在运行: python main.py');
        });
    </script>
</body>
</html>
